<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "毛体";
            src: url(./font/maozedong.ttf);
        }
        .box{
            width: 100px;
            height: 100px;
            /* background-color: rgba(238, 98, 98,1); */
            /* background-color: transparent; */
            background-color: #666666;
            position: absolute;
            top: 0;
        }
        .p1{
            font-style: normal;
            font-weight: 500;
            font-size:40px;
        }
        .c2{
            font-size: 20px;
        }
        .p2{
            font-size: 3em;
        }
        .p3{
            font-size: 2rem;
        }
        html{
            font-size: 15px;
        }
        .p4{
            font-family: "幼圆","宋体";
        }
        .p5{
            font-family: Helvetica,"Times New Roman";
        }
        .p6{
           font: normal bold 40px "楷体";
        }
        .p7{
            font: normal bold 40px/200% "毛体";
        }
    </style>
</head>
<body>
    <p>下面的文字</p>
    <!-- <div class="box"></div> -->
    <p class="p1">有何九年</p>
    <div class="c2">
        <p class="p2">
            李太白
            
        </p>
        <p class="p3">
            杜少陵
        </p>
        <p class="p4">
            王勃 卢照邻 骆宾王 杨炯
        </p>
        <p class="p5">
            Nice to meet you lily
        </p>
        <p class="p6">
            青莲居士
        </p>
        <div class="p7">
            明月松间照，<br>
            清泉石上流
        </div>
    </div>
</body>
</html>